<template>
  <div>
    <h3>基础用法</h3>
      <at-steps :space="100" :active="active" finish-status="success">
        <at-step title="步骤 1"></at-step>
        <at-step title="步骤 2"></at-step>
        <at-step title="步骤 3"></at-step>
      </at-steps>
      <at-button style="margin-top: 12px;" @click="next">下一步</at-button>
    <h3>含状态步骤条</h3>
      <at-steps :space="100" :active="1" finish-status="success">
        <at-step title="已完成"></at-step>
        <at-step title="进行中"></at-step>
        <at-step title="步骤 3"></at-step>
      </at-steps>
    <h3>有描述的步骤条</h3>
      <at-steps :space="100" :active="1" finish-status="success">
        <at-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></at-step>
        <at-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></at-step>
        <at-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></at-step>
      </at-steps>
    <h3>带图标的步骤条</h3>
      <at-steps :space="100" :active="1" finish-status="success">
        <at-step title="步骤 1"  icon="edit"></at-step>
        <at-step title="步骤 2"  icon="upload2"></at-step>
        <at-step title="步骤 3"  icon="picture"></at-step>
      </at-steps>
    <h3>竖式步骤条</h3>
      <at-steps :space="100" direction="vertical" :active="1">
        <at-step title="步骤 1"></at-step>
        <at-step title="步骤 2"></at-step>
        <at-step title="步骤 3"></at-step>
      </at-steps>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 1
      };
    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>